<template>
  <view class="webview-container">
    <!-- WebView组件 -->
    <view>
      <web-view :src="webUrl" @message="onMessage" @error="onError" @load="onWebViewLoad"></web-view>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';

// WebView链接
const webUrl = ref('');

// 使用uni-app的onLoad钩子函数获取参数
onLoad((options) => {
  // 获取传递的链接和标题
  console.log(options);
  const url = options.url || '';
  const title = options.title || '网页';

  // 使用uni-app API设置页面标题
  uni.setNavigationBarTitle({
    title: decodeURIComponent(title)
  });

  // 设置WebView链接
  if (url) {
    webUrl.value = decodeURIComponent(url);
  } else {
    // 默认显示错误页面
    webUrl.value = 'about:blank';
    uni.setNavigationBarTitle({
      title: '页面错误'
    });
  }
});

// WebView消息处理
const onMessage = (event) => {
  console.log('WebView消息:', event);
};

// WebView错误处理
const onError = (event) => {
  console.error('WebView错误:', event);
  uni.showToast({
    title: '页面加载失败',
    icon: 'error'
  });
};

// WebView加载完成
const onWebViewLoad = (event) => {
  console.log('WebView加载完成:', event);
};
</script>

<style lang="scss" scoped>
.webview-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>
